<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
<%
	String bathPath = request.getContextPath();
	pageContext.setAttribute("bathPath", bathPath);
%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>控制器页面</title>
<link rel="stylesheet" href="${bathPath}/frame/layui/css/layui.css">
<link rel="stylesheet" href="${bathPath}/frame/static/css/style.css">
<link rel="icon" href="${bathPath}/frame/static/image/code.png">
<link type="text/css" rel="stylesheet" href="${bathPath}/css/page.css"/>
<script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="${bathPath}/js/ajaxSessionOut.js" ></script>
<!-- layer -->
<link type="text/css" rel="stylesheet" href="${bathPath}/js/layer/skin/layer.css"/>
<script type="text/javascript" src="${bathPath}/js/layer/layer.js" ></script>
<!-- validation -->
<script type="text/javascript" src="${bathPath }/js/jquery-validation/jquery.validate.js"></script>
<script src="${bathPath }/js/quickui/libs/js/form/validationRule.js" type="text/javascript"></script>
<script src="${bathPath }/js/quickui/libs/js/form/validation.js" type="text/javascript"></script>
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-sm" onclick="addtab()" >增加人员</a>
  </div>
</script>

<script type="text/html" id="barDemo">
  <div class="layui-btn-container">
	<button class="layui-btn layui-btn-xs" lay-event="upd">删除</button>
  </div>
</script>

<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    tabAdd: function(){
      //新增一个Tab项
      element.tabAdd('demo', {
        title: '新选项'+ (Math.random()*1000|0) //用于演示
        ,content: '内容'+ (Math.random()*1000|0)
        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
      })
    }
    ,tabDelete: function(othis){
      //删除指定Tab项
      element.tabDelete('demo', '44'); //删除：“商品管理”
      
      
      othis.addClass('layui-btn-disabled');
    }
    ,tabChange: function(){
      //切换到指定Tab项
      element.tabChange('demo', '22'); //切换到：用户管理
    }
  };
  
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
  
  //Hash地址的定位
  var layid = location.hash.replace(/^#test=/, '');
  element.tabChange('test', layid);
  
  element.on('tab(test)', function(elem){
    location.hash = 'test='+ $(this).attr('lay-id');
  });
});

//门权限
layui.config({
	base: '${bathPath}/js/',
})
layui.use(['treetable','form'],function(){
	var data=[{"id":1,"pid":0,"title":"1-1"},{"id":2,"pid":0,"title":"1-2"},{"id":3,"pid":0,"title":"1-3"},{"id":4,"pid":1,"title":"1-1-1"},{"id":5,"pid":1,"title":"1-1-2"},{"id":6,"pid":2,"title":"1-2-1"},{"id":7,"pid":2,"title":"1-2-3"},{"id":8,"pid":3,"title":"1-3-1"},{"id":9,"pid":3,"title":"1-3-2"},{"id":10,"pid":4,"title":"1-1-1-1"},{"id":11,"pid":4,"title":"1-1-1-2"}];
	var o = layui.$,treetable = layui.treetable;
	var form = layui.form,layer = layui.layer;
	treetable.render({
		elem: '#test-tree-table',
		data: data,
		field: 'title',
		is_checkbox:false,//左边的checkbox
		checked:[1,2,3,4],
		/*icon_val: {
			open: "&#xe619;",
			close: "&#xe61a;"
		},
		space: 4,*/
		cols: [
			{field: 'title',title: '组名称',width: '10%',
				template: function(item){
					if(item.level == 1){
						return '<span style="color:red;">'+item.title+'</span>';
					}
					if(item.level == 2){
						return '<span style="color:green;">'+item.title+'</span>';
					}
					return item.title;
				}
			},
			{field: 'id',title: '控制器',width: '20%'},
			{field: 'pid',title: '门地址',width: '10%',},
			{field: 'pid',title: '门名称',width: '10%',},
			{field: 'pid',title: '授权',width: '10%',
				template: function(item){
					return '<input type="checkbox"  name="" lay-skin="primary" lay-filter=""';
				}
			},
			{field:'pid', title: '通行时间组',width:'40%',}
			/* {field: 'actions',title: '操作',width: '30%',
				template: function(item){
					var tem = [];
					if(item.pid == 0){
						tem.push('<a class="add-child" lay-filter="add">添加子级</a>');
					}
					tem.push('<a lay-filter="edit">编辑</a>');
					if(item.pid > 0){
						tem.push('<a class="set-attr">设置属性</a>');
					}
					return tem.join(' <font>|</font> ')
				},
			}, */
		]
	});
	
	treetable.on('treetable(add)',function(data){
		layer.msg('添加操作');
		console.dir(data);
	})
	
	treetable.on('treetable(edit)',function(data){
		layer.msg('编辑操作');
		console.dir(data);
	})
	
	o('.up-all').click(function(){
		treetable.all('up');
	})
	
	o('.down-all').click(function(){
		treetable.all('down');
	})
	
	o('.get-checked').click(function(){
		//console.dir(treetable.all('checked'));
		treetable.all('checked');
	})
	
	form.on('switch(status)',function(data){
		layer.msg('监听状态操作');
		console.dir(data);
	})
})


//人员
layui.use('table', function(){
	var table = layui.table;
  	var layTableId="test";
  	//var flag=0; //判断表格是否在增加数据
	//返回data数据给表格
 	var laydata="";
 	function getdata(parm){
	 	$.ajax({
			type:"POST",
			data:parm,
			async:false,  //默认true,异步
			url:"${bathPath}/aDKUserInfo/selectAll.action",
			success:function(data){
					laydata=data;
		    }
		});  
	 return laydata;
 }

 //搜索事件
  function selectall()
  {
	  var parm = $('#myform').serialize(); //获取表单所有数据
	  alert(parm);
	 // alert(demoReload);
  	//这里以搜索为例
  	table.reload('test',{
  		data:getdata(parm),  //返回查询后的data直接赋值
  	    page: {
  	    curr: 1 //重新从第 1 页开始
  	  }
  	});
  	}
  //监听头工具栏事件
  	table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
  });
        	
  //监听行工具栏事件
	table.on('tool(test)', function(obj){
		var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	  if(layEvent === 'upd'){
		upd(data.cardID);
	    } 
});
        	
//监听排序
  table.on('sort(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  parm="sort="+obj.field+"&order="+ obj.type;
  //alert(parm);
  
  table.reload('test', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
    ,data:getdata(parm)
  });
}); 
//文本框搜索
		  $('.demoTable .layui-btn').on('click', function(){
		    selectall();
		  });		  
  //渲染表格
 table.render({
	    elem:'#test'
	    ,id:layTableId
	    ,url:'${bathPath}/aDKPowerGroup/selectAlluser.action?groupID='+$("#groupID").val()
	 	//,data:getdata()
	    ,toolbar: '#toolbarDemo' 
	    ,cellMinWidth:80
	    ,width:740
	    ,size:'sm'//小表格
	    ,cols: [[
	    	/*  {type: 'checkbox', fixed: 'left',align:'center',width:'5%'}
			, */{type: 'numbers',title:'序号', fixed: 'left',align:'center',width:'10%'}
	      	,{field: 'groupName',title:'所在部门', fixed: 'left',align:'center',width:'20%'}
	      	,{field: 'userid',title:'人员编号', fixed: 'left',align:'center',width:'15%'}
	      	,{field: 'username',title:'人员名称', fixed: 'left',align:'center',width:'20%'}
	      	,{templet: '#caozuo', title: '操作',align:'center',width:'30%',toolbar: '#barDemo'}
	    ]]
	    ,page: true //开启分页
	    ,limit:10   //默认十条数据一页
        ,limits:[10,20,30,40,100]  //数据分页条
	  }); 
});

//使用此配置
function saveBtu(){
	var param=$("form").serialize();
	//alert($("#groupID").val());
	layer.confirm("保存成功", {btn: ['确定'], title: "提示",skin:"my-skin"}, function(){
		$.ajax({
			 type:"POST",
			 async:false,
			 dataType:JSON,
			 data:param,
		     url:"${bathPath}/aDKDoor/doorInandUp.action",
		     success:function(data){
		    	 if(data!="SUCCESS"){
						layer.msg(data);
					}
		     }
		 });
		layer.close(layer.index);
		parent.location.reload(); 
	}); 
}
</script>
<style type="text/css">
	.my-skin .layui-layer-btn a {
	background-color:#009688;
}

	body{padding: 0px 0px;}
	.hide{display:none}
</style>
</head>
<body>
<form class="layui-form layui-form-pane"  id="myform" method="post" action="" showOnMouseOver="false"> 
<input type="hidden" id="groupID" name="groupID" value="${power.groupID}" />
<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">门权限</li>
    <li>电梯权限</li>
    <li>人员</li>
  </ul>
  <div class="layui-tab-content" style="height:387px;">
    <!--门权限 -->
    <div class="layui-tab-item layui-show">
      <!-- <table class="param_table" style="border:1px solid red;border-collapse:separate; border-spacing:0px 10px; width:680px; margin-left:7px;">
      </table> -->
		<button class="layui-btn layui-btn-warm site-demo-active layui-btn-sm up-all" style="margin-top:10px; margin-left:10px;">全部收起</button>
		<button class="layui-btn layui-btn-warm site-demo-active layui-btn-sm down-all" style="margin-top:10px;">全部展开</button>
		<button class="layui-btn layui-btn-warm site-demo-active layui-btn-sm get-checked" style="margin-top:10px;">获取选中</button>
		
		<button class="layui-btn site-demo-active layui-btn-sm get-checked" style="margin-top:10px; float:right; margin-right:10px;">全选</button>
		<button class="layui-btn site-demo-active layui-btn-sm get-checked" style="margin-top:10px; float:right;">保存</button>
		<button class="layui-btn site-demo-active layui-btn-sm get-checked" style="margin-top:10px; float:right;">全清</button>
		
		<table class="layui-table layui-form" id="test-tree-table"></table>
		<!-- <input class="layui-btn site-demo-active layui-btn-sm" style="margin-left:305px;" type="button" onclick="saveBtu()" value="保 存"  class="primary"/> -->
    </div>
    <!--电梯权限 -->
    <div class="layui-tab-item">
    	<div>
      		<div id="kai" style="width:330px; height:300px;background-color:white;opacity:0.1;margin-top:50px;z-index:9999; position:fixed;" ></div>
	      		<table  class="param_table" style="border-collapse:separate; border-spacing:0px 3px; width:325px; margin-left:7px;">
	      			<span>哈哈哈哈哈哈</span>
	      		</table>
    		</div>
    </div>
    <!--人员-->
    <div class="layui-tab-item">
    	<div>
    		<div style="width:330px; height:300px;background-color:white;opacity:0.1;margin-top:50px;z-index:9999; position:fixed;" ></div>
	      	<!-- <table  class="param_table" style="border-collapse:separate; border-spacing:0px 3px; width:325px; margin-left:7px;">
	      	</table> -->
	      	<table class="layui-hide"  id="test"  lay-filter="test"></table>
    	</div>
    </div>
</div>
</form>
</body>
</html>